<style disabled>
    header, footer {
        margin:    1em  auto;
    }
    thead th {
        white-space:    nowrap;
        text-align:     center;
    }
    tbody {
        counter-reset:    index;
    }
    tbody td {
        vertical-align:    middle;
    }
    tbody td.index:before {
        counter-increment:    index;
        content:              counter( index );
    }
</style>
<script src="Data_Table.js"></script>

<header class="Grid-Row">
    <label>
        显示
        <select name="rows" value="${view.rows}" onchange="${view.pageChange}">
            <option>10</option>
            <option>20</option>
            <option>30</option>
        </select>
        行
    </label>
    <slot name="toolbar"></slot>
</header>
<slot name="table"></slot>

<footer class="Grid-Row">
    <span>共<!-- ${view.total} -->行</span>
    <label>
        跳转到
        <input type="number" name="page" value="${view.page}"
               min="1" max="${view.pageSum}" onchange="${view.pageChange}" />
        页
    </label>
    <ul class="pagination" onclick="${view.pageChange}">
        <li style="display: ${(view.page < 3) ? 'none' : ''}">
            <span>1</span>
        </li>
        <li style="display: ${(view.pageSum < 7) || (view.page < 4) ? 'none' : ''}"
            class="disabled">
            <span>…</span>
        </li>
        <li style="display: ${(view.page < 2) ? 'none' : ''}">
            <span><!--${view.page - 1}--></span>
        </li>
        <li class="active">
            <span><!--${view.page}--></span>
        </li>
        <li style="display: ${(+view.page + 1 > view.pageSum) ? 'none' : ''}">
            <span><!--${+view.page + 1}--></span>
        </li>
        <li style="display: ${(view.pageSum < 6) || (+view.page + 3 > view.pageSum) ? 'none' : ''}"
            class="disabled">
            <span>…</span>
        </li>
        <li style="display: ${(+view.page + 2 > view.pageSum) ? 'none' : ''}">
            <span><!--${view.pageSum}--></span>
        </li>
    </ul>
</footer>
